{% extends 'base.html' %}
{% load news_filters %}
{% block title %}
    新闻详情页
{% endblock %}

{% block header %}
    <link rel="stylesheet" href="{% static 'css/news_detail.css' %}">
    <link rel="stylesheet" href="{% static 'css/index.css' %}">
    <script src="{% static 'js/news_detail.js' %}"></script>
{% endblock %}
{% block main %}
    <div class="main">
		<div class="wrapper">
            <div class="news-detail">
                <div class="news-detail-title">
                    <h1 class="title">{{ news.title }}</h1>
                    <div class="news-info">
                        <div class="info-group">
                            <span class="author-de">{{ news.author.name }}</span>
                            <span class="pub-time-de">{{ news.pub_time|time_since }}</span>
                            <span class="category-de">{{ news.category.name }}</span>
                        </div>
                        <div class="share">
                            <span>分享至：</span>
                            <a href="#" class="weixin"></a>
                            <a href="#" class="weibo"></a>
                        </div>
                    </div>
                    <article class="article">
                        {{ news.content | safe }}
                    </article>
                </div>
                <div class="comment-wrapper">
                    <h3 class="title">文章评论（113+）</h3>
                    <textarea name="comment" class="comment-area no-login-comment" placeholder="参与评论！"></textarea>
                    <div class="submit-btn">
                        <button class="submit-btn-click" data-news-id="{{ news.pk }}">立即评论</button>
                    </div>
                        <ul class="comment-list">
                        {% for comment in comments %}
                            <li>
                                <div class="comment-info">
                                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1528129845916&di=536993042d5223862f8c4ab157ba6e72&imgtype=0&src=http%3A%2F%2Fpic1.ipadown.com%2Fimgs%2F201206120933354195.jpg" alt="" class="avatar">
                                    <span class="author">{{ comment.author.username }}</span>
                                    <span class="pub-time">{{ comment.pub_time|time_since }}</span>
                                </div>
                                <p class="comment-content">{{ comment.content }}</p>
                            </li>
                        {% endfor %}
                        </ul>
                </div>
            </div>
			<div class="sidebar-wrapper">
				<div class="title-group">
					<span class="title">在线课堂</span>
					<a href="#" class="more">更多</a>
				</div>
				<div class="advertise-group">
					<a href="#"><img src="http://www.xfz.cn/static/build/images/side-gift-banner.png"></a>
				</div>
				<div class="platform-group">
					<div class="title-group">
						<span class="title">关注小饭桌</span>
					</div>
					<div class="focus-group">
						<ul class="left-group">
							<li class="zhihu"><a href="#" target="_blank">知乎小饭桌</a></li>
							<li class="weibo"><a href="#" target="_blank">微博小饭桌</a></li>
							<li class="toutiao"><a href="#" target="_blank">头条小饭桌</a></li>
						</ul>
						<div class="right-group"><p class="desc">dddddd扫码关注微信公众号6666</p></div>
					</div>
				</div>
				<div class="hot-news-group">
					<div class="title-group">
						<span class="title">热门推荐</span>
					</div>
					<ul class="hot-list-group">
						<li>
							<div class="left-group">
								<p class="title">
									<a href="#">王健林卖掉进军海外首个项目:17亿售伦敦ON...</a>
								</p>
								<p class="more">
									<span class="category">深度报道</span>
									<span class="pub-time">1-17 20:20:20</span>
								</p>
							</div>
							<div class="right-group">
								<a href="#"><img src="http://static-image.xfz.cn/1516169692_914.jpg-website.news.list" alt=""></a>
							</div>
						</li>
						<li>
							<div class="left-group">
								<p class="title">
									<a href="#">王健林卖掉进军海外首个项目:17亿售伦敦ON...</a>
								</p>
								<p class="more">
									<span class="category">深度报道</span>
									<span class="pub-time">1-17 20:20:20</span>
								</p>
							</div>
							<div class="right-group">
								<a href="#"><img src="http://static-image.xfz.cn/1516169692_914.jpg-website.news.list" alt=""></a>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
{% endblock %}